<template>
    <div class="content">
        <div class="heade">
            <van-image
                src="https://cdn7.axureshop.com/demo2024/1212098/images/%E9%85%92%E5%BA%97/u4396.png"></van-image>
        </div>
        <div class="box">
            <van-tabs v-model:active="activeName">
                <van-tab title="国内" name="a">
                    <div class="top">
                        <van-search v-model="valueSearch" shape="round" placeholder="请输入搜索关键词" class="search" />
                        <div class="main">
                            <div class="left" @click="showClick">
                                <span>{{ weeks1 || nowWeekfirst }}</span>
                                <div class="bottom">
                                    <span>{{ monthday1 || nowDay }}</span>
                                    <span>{{ dayDate || '共1晚' }}</span>
                                </div>
                            </div>
                            <div class="zj" @click="showClick">
                                <span>{{ weeks2 || nowWeeksecond }}</span>
                                <span>{{ monthday2 || nowDay1 }}</span>
                            </div>
                            <div class="right" @click="isshowClick">
                                <span>每间</span>
                                <span>{{ valueMan || 1 }}成人{{ valuebay || 1 }}儿童</span>
                            </div>
                        </div>
                        <div class="box_box">
                            <van-swipe style="height: 100%;" :autoplay="800" :show-indicators="false" vertical
                                class="box-swipe">
                                <van-swipe-item class="items" v-for="items in selctlisten">{{ items }}</van-swipe-item>
                            </van-swipe>
                        </div>
                        <div class="box_bottom">
                            <van-button type="primary" block>搜索酒店</van-button>
                        </div>
                    </div>
                    <!-- 日期选择弹出框 -->
                    <van-calendar v-model:show="show" type="range" @confirm="onConfirm" />
                    <!-- 入住条件弹出框 -->
                    <van-popup v-model:show="isshow" closeable close-icon-position="top-left" position="bottom"
                        :style="{ height: '100%' }">
                        <div class="header">入住条件</div>
                        <div class="boxrz">
                            <div class="top">
                                <div class="box_select">
                                    <div class="left">
                                        <span>成人</span>
                                    </div>
                                    <div class="right">
                                        <van-stepper v-model="valueMan1" theme="round" button-size="22" disable-input
                                            @change="plusClick" />
                                    </div>
                                </div>
                                <div class="box_select">
                                    <div class="left">
                                        <span>儿童</span>
                                    </div>
                                    <div class="right">
                                        <van-stepper v-model="valuebay1" theme="round" button-size="22" disable-input
                                            @change="plusClick2" />
                                    </div>
                                </div>
                            </div>
                            <div class="bottom">
                                <van-button @click="clikclod">完成</van-button>
                            </div>
                        </div>
                    </van-popup>
                </van-tab>
                <van-tab title="国际" name="b">

                </van-tab>
                <van-tab title="民宿" name="c">民宿</van-tab>
            </van-tabs>
        </div>
        <div class="bottom_box">
            <div class="heade">
                <span>热门推荐</span>
            </div>
            <div class="main2">
                <div class="box2">
                    <ul class="flexe">
                        <li v-for="item in 6">
                            <div class="top">
                                <van-image
                                    src="https://cdn7.axureshop.com/demo2024/1212098/images/%E9%85%92%E5%BA%97/u4401.png"></van-image>
                            </div>
                            <div class="bottom">
                                <div class="bottom_top">
                                    时光美好丽致酒店（北京科技城店）
                                </div>
                                <div class="bottom_bottom">
                                    <span style="color: red;">¥305</span> <span>/起</span> <del>¥500</del> <span>已售100</span>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
const selctlisten = ['试试搜如家酒店', '试试搜自如', '试试搜橘子酒店']
const activeName = ref('a')
const show = ref(false) //日期选择弹框
const isshow = ref(false) //入住条件弹框
const weeks1 = ref() //左侧的周几
const weeks2 = ref() //右侧的周几
const monthday1 = ref() //左侧的月和日
const monthday2 = ref() //左侧的月和日
const dayDate = ref() //住的天数
const valueMan = ref() //成人
const valuebay = ref() //儿童
const valueMan1 = ref() //成人新
const valuebay1 = ref() //儿童新
const valueSearch = ref() //搜索


const listen = ['成人', '儿童']

// 计算时间差
function onConfirm(value: any) {
    const first = value[0]
    const seconde = value[1]

    const firstDateString = new Date(first)
    const secondeDateString = new Date(seconde)

    console.log(firstDateString.getMonth(), 'iiiiiiiiiii')

    // 格式化日和月
    function formaDate(data: any) {
        const month = (data.getMonth() + 1)

        const day = data.getDate() < 10 ? '0' + (data.getDate()) : data.getDate()


        return `${month}月${day}日`
    }

    const firstDate = formaDate(firstDateString)
    const secondeDate = formaDate(secondeDateString)

    // 获取周
    function formaDateWeek(data: any) {
        const weeks = data.getDay()
        let weekDate
        switch (weeks) {
            case 1:
                weekDate = '周一'
                break;
            case 2:
                weekDate = '周二'
                break;
            case 3:
                weekDate = '周三'
                break;
            case 4:
                weekDate = '周四'
                break;
            case 5:
                weekDate = '周五'
                break;
            case 6:
                weekDate = '周六'
                break;
            default:
                weekDate = '周日'
        }
        return weekDate
    }

    // 计算天数
    function formaDateDay(first: any, second: any) {
        const firstDay = first.getTime()
        const secondeDay = second.getTime()

        // 时间差
        const days = (secondeDay - firstDay) / (1000 * 60 * 60 * 24)

        dayDate.value = '共' + days + '晚'



        return `${days}`
    }

    console.log(formaDateDay(firstDateString, secondeDateString), '时间戳')


    const firstweeks = formaDateWeek(firstDateString)
    const secondeWeeks = formaDateWeek(secondeDateString)



    monthday1.value = firstDate
    monthday2.value = secondeDate

    weeks1.value = firstweeks
    weeks2.value = secondeWeeks


    console.log(firstDate, secondeDate, '周')
    console.log(firstweeks, 'hhhhhhhh', secondeWeeks, 'jjjjjjjjjjjjjj')

    show.value = false

}

// 计算当前月日开始
const nowDay = computed(() => {
    const data = new Date()
    const getMonth = data.getMonth()
    const getDay = data.getDate() < 10 ? '0' + data.getDate() : data.getDate()

    return `${getMonth}月${getDay}日`
})
// 计算结束时间
const nowDay1 = computed(() => {
    const data = new Date()
    const getMonth = data.getMonth()
    const getDay = ((data.getDate() + 1) < 10 ? '0' + (data.getDate() + 1) : (data.getDate() + 1))

    return `${getMonth}月${getDay}日`
})
// 计算当前周开始
const nowWeekfirst = computed(() => {
    const data = new Date()
    const weeks = data.getDay()
    let weekDate
    switch (weeks) {
        case 1:
            weekDate = '周一'
            break;
        case 2:
            weekDate = '周二'
            break;
        case 3:
            weekDate = '周三'
            break;
        case 4:
            weekDate = '周四'
            break;
        case 5:
            weekDate = '周五'
            break;
        case 6:
            weekDate = '周六'
            break;
        default:
            weekDate = '周日'
    }
    return weekDate
})
// 计算当前周结束
const nowWeeksecond = computed(() => {
    const data = new Date()
    const weeks = data.getDay() + 1
    let weekDate
    switch (weeks) {
        case 1:
            weekDate = '周一'
            break;
        case 2:
            weekDate = '周二'
            break;
        case 3:
            weekDate = '周三'
            break;
        case 4:
            weekDate = '周四'
            break;
        case 5:
            weekDate = '周五'
            break;
        case 6:
            weekDate = '周六'
            break;
        default:
            weekDate = '周日'
    }
    return weekDate
})



// 打开日期选择弹窗
function showClick() {
    show.value = true
}

// 计算入住人数
function plusClick(value: any) {
    console.log(value)
    valueMan1.value = value
    console.log(valueMan1.value, '成人')
}
function plusClick2(value: any) {
    console.log(value)
    valuebay1.value = value
    console.log(valuebay1.value, '儿童')
}

// 打开入住条件弹框
function isshowClick() {
    isshow.value = true
    valueMan1.value = ''
    valuebay1.value = ''
}// 关闭入住条件弹框
function clikclod() {
    isshow.value = false
    console.log(valueMan1.value, 'iiiiiiiiiiiiii')
    valueMan.value = valueMan1.value
    valuebay.value = valuebay1.value
}


</script>


<style lang="scss" scoped>
.heade {
    z-index: 0;
}

.box {
    height: 3rem;
    width: 3.3rem;
    background-color: #fff;
    position: relative;

    top: -1.5rem;
    left: 0.23rem;
    z-index: 99999 !important;

    .top {


        .main {
            display: flex;
            // background-color: red;
            justify-content: space-evenly;
            border-bottom: 1px solid #ccc;
            line-height: 0.3rem;
            margin-right: 0.2rem;
            margin-left: 0.2rem;

            .zj {
                display: flex;
                flex-direction: column;
            }

            .right {
                display: flex;
                flex-direction: column;
            }
        }

        .box_box {
            height: 0.5rem;
            border-bottom: 1px solid #ccc;
            margin-right: 0.2rem;
            margin-left: 0.2rem;
            text-align: center;

            .box-swipe {

                // background-color: red;
                .items {
                    height: 0.5rem;
                    line-height: 0.5rem;
                    // background-color: red;
                }
            }
        }

        .box_bottom {
            padding: 0.2rem;

            .van-button {
                border-radius: 0.4rem;
            }
        }
    }
}

// 入住条件弹框
.header {
    border-bottom: 1px solid #ccc;
    font-size: 0.17rem;
    font-weight: bold;
}

.boxrz {
    display: flex;
    flex-direction: column;
    background-color: #f2f2f2;

    // height: 100%;

    .top {
        // flex: 1;
        // margin-top: 0.5rem;
        overflow: auto;

        .box_select {
            display: flex;
            padding: 0.2rem;
            height: 0.2rem;
            background-color: #fff;
            border-bottom: 1px solid #ccc;



            .left {
                flex: 1;
            }
        }

    }

    .bottom {
        position: fixed;
        bottom: 0.1rem;
        height: 0.5rem;
        // background-color: #fff;
        width: 100%;
        text-align: center;

        .van-button {
            width: 85%;
            border-radius: 1rem;
            background-color: #5375fd;
            color: #fff;
        }
    }
}

.bottom_box {
    // background-color: yellow;
    height: 4rem;
    position: relative;
    top: -3.2rem;

    // margin-left: 0.1rem;
    // margin-right: 0.1rem;
    .heade {
        position: relative;
        top: 1.9rem;
        margin-left: 0.22rem;
        margin-right: 0.1rem;
        font-size: 0.18rem;
    }

    .main2 {
        // margin-left: 0.1rem;
        // margin-right: 0.1rem;
        // background-color: yellow;
        height: 100%;
        width: 100%;
        position: relative;
        top: 3rem;


        .box2 {

            width: 100%;
            //   background-color: red;


            .flexe {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
                align-items: center;
                width: 100%;
            }
        }


        li {

            // background-color: red;
            width: 48%;

        }




    }
}
</style>